<template>
  <div class="content">
    <dc-header :page-to="'/home'" :title="'员工情况'" :rightIcon="''"></dc-header>
    <div class="head-top">
      <dc-date @getTabBarDatep="getDate" :startTime="this.curDate.startTime" :startDateType="this.curDate.type"></dc-date>
    </div>
    <div class="common-card mt20 bg-white">
      <dc-row class="pt40 pb40" type="flex" justify="space-around">
        <dc-col class="card-data" span="8">
          <span class="num">{{overview.employees}}</span>
          <span class="label">员工总人数</span>
        </dc-col>
        <dc-col class="card-data" span="8">
          <span class="num">{{overview.empPerformance}}</span>
          <span class="label">人效</span>
        </dc-col>
        <dc-col class="card-data" span="8">
          <span class="num">{{overview.empPerformancePeak}}</span>
          <span class="label">高峰段人效</span>
        </dc-col>
      </dc-row>
    </div>
    <div class="common-card mt20">
      <dc-cell title="人效趋势" class="main-title"></dc-cell>
      <div class="common-chart" id="empLine"></div>
    </div>
    <dc-podium :date="this.currentDate" :type="1"></dc-podium>
    <dc-podium :date="this.currentDate" :type="2"></dc-podium>
  </div>
</template>

<script>
  import {initLine} from '@/common/echarts/line';
  import header from '@/components/header';
  import date from '@/components/datetabbar/all';
  import {col, row} from '@/components/Flex';
  import cell from '@/components/cell';
  import api from '@/common/api/employe';
  import podium from './podium.vue';
  import {mapActions, mapGetters} from 'vuex';

  export default {
    components: {
      'dc-header': header,
      'dc-cell': cell,
      'dc-col': col,
      'dc-row': row,
      'dc-podium': podium,
      'dc-date': date
    },
    data () {
      return {
        currentDate: {},
        overview: {},
        lineData: {},
        discLine: null
      };
    },
    mounted () {
      this.discLine = initLine('#empLine');
    },
    activated () {
      this.dataInit();
      if (this.curDate) {
        this.currentDate = {
          type: this.curDate.type,  //时间范围标识，1-日；2-周；3-月；4-年
          startTime: this.curDate.startTime,
          endTime: this.curDate.endTime
        };
      }
      this.initTrendLine();
    },
    computed: {
      ...mapGetters(['curDate'])
    },
    methods: {
      ...mapActions({saveDate: 'saveDate', clearDate: 'clearDate'}),
      //数据初始化
      dataInit () {
        this.overview = {employees: 0, empPerformance: 0, empPerformancePeak: 0};
        this.lineData = {x: [0], y: [0]};
        this.initTrendLine();
      },
      getDate (date) {
        this.dataInit();
        if (date) {
          this.saveDate(date);
          this.currentDate = date;
          this.buildChart();
        }
      },
      buildChart () {
        let data = {
          timeFlag: this.currentDate.type,
          beginTime: this.currentDate.startTime,
          endTime: this.currentDate.endTime
        };
        this._getOverview(data);
        this._getTrend(data);
      },
      _getOverview (data) {  //获取员工分析信息
        api.getOverview(data)
          .then(res => {
            //考虑需求的变动性，接口返回数组的形式，便于以后扩展
            if (res.length > 0) {
              this.overview = res[0];
            }
          });
      },
      _getTrend (data) {  //获取人效趋势
        api.getTrend(data)
          .then(res => {
            if (res && res.length > 0) {
              this.lineData.x = [];
              this.lineData.y = [];
              let self = this;
              res.forEach((item) => {
                self.lineData.x.push(item.timeName);
                self.lineData.y.push(item.value);
              });
              this.initTrendLine();
            }
          });
      },
      //优惠构成趋势
      initTrendLine () {
        this.discLine.hideLoading();
        this.discLine.setOption({
          xAxis: {
            data: this.lineData.x
          },
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [{
            // 根据名字对应到相应的系列
            name: '人效',
            type: 'line',
            areaStyle: {normal: {}},
            data: this.lineData.y
          }]
        });
      }
    },
    beforeRouteLeave (to, from, next) {
      // 返回home页后清空日期缓存
      if (to.path === '/home') {
        this.clearDate();
      }
      next();
    }
  };
</script>

<style lang="scss" scoped>
  @import "../../../assets/css/variable";
  .podium {
    font-size: px2rem(28px);
    .db {
      display: block;
    }
    .mt10 {
      margin-top: px2rem(10px);
    }
    .avatar {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
    .head-img {
      width: px2rem(100px);
      height: px2rem(100px);
      margin: 0 auto;
      position: relative;
    }
    .crown {
      width: 30px;
      height: 30px;
      background-size: 100%;
      position: absolute;
      top: -12px;
      right: -16px;
    }
    .big-avatar {
      width: px2rem(140px);
      height: px2rem(140px);
      .crown {
        width: 40px;
        height: 40px;
        top: -16px;
        right: -20px;
      }
    }
    .block {
      color: #fff;
      margin: px2rem(10px) px2rem(40px);
      font-size: px2rem(26px);
    }
    .first {
      height: px2rem(80px);
      line-height: px2rem(80px);
      background-color: #F6D331;
    }
    .second {
      height: px2rem(60px);
      line-height: px2rem(60px);
      background-color: #B8C9DD;
    }
    .third {
      height: px2rem(40px);
      line-height: px2rem(40px);
      background-color: #E9995C;
    }
  }

  .more {
    text-align: center;
    line-height: px2rem(90px);
    font-size: px2rem(30px);
    color: #999;
    display: block;
  }

  .mb40 {
    margin-bottom: px2rem(40px);
  }
</style>
